<template>
	<view class="container">
		<view class="content">
			<div class="top-btn">
				<u-checkbox-group v-model="checkedAll" placement="column" @change="checkAllChange">
					<u-checkbox name="all" label="全选">
					</u-checkbox>
				</u-checkbox-group>
				<u-button text="恢复删除" type="primary" class="create-btn" @click="onUndeletion()"></u-button>
			</div>
			<view v-if="deletionData.length==0">
				<u-empty mode="list" icon="../../static/listEmpty.png"></u-empty>
			</view>
			<view class="deletion-item" v-for="(item,index) in deletionData" :key="index" v-else>
				<view class="historicalAchievements_item u-border-bottom">
					<view class="item-left">
						<u-checkbox-group v-model="item.checked" placement="column">
							<u-checkbox name="yes">
							</u-checkbox>
						</u-checkbox-group>
						{{index}}
					</view>
					<view class="item-right">
						<text class="bold">题目类型：</text>
						<text v-if="item.type ==1">单选题</text>
						<text v-if="item.type ==2">多选题</text>
						<text v-if="item.type ==3">判断题</text>
						<view>
							<text class="bold">题干：</text>
							<text>{{item.stem}}</text>
						</view>
						<u-row>
							<u-col span="1.5">
								<text class="bold">选项：</text>
							</u-col>
							<u-col span="10.5">
								<text v-for="(val,key,i) in item.options" :key="i"
									class="layout-start">{{key+'：'+val+' '}}
								</text>
							</u-col>
						</u-row>
						<view>
							<text class="bold">答案：</text>
							<text v-for="(itm,indx) in item.correctOptions" :key="indx">
								<text v-if="indx">,</text>{{itm}}
							</text>
						</view>
						<view v-if="item.analysis">
							<text class="bold">解析：</text>
							<text>{{item.analysis}}</text>
						</view>
					</view>
				</view>

			</view>
			<u-loadmore :status="statusLoading" v-if="deletionData.length!=0" />
		</view>
	</view>
</template>

<script>
	import {
		viewDel,
	} from "../../utils/api.js"
	export default {
		data() {
			return {
				fullHeight: true,
				deletionData: [],
				deletePage: {
					page: 1,
					pageSize: 5,
					total: 0,
				},
				checkedAll: [],
				statusLoading: 'loadmore',
				nextQuery: false,
				onlyReachBottom: true,
			};
		},
		onLoad(option) {
			this.getDeletionData();
		},
		onReachBottom() {
			if (this.fullHeight) {
				this.fullHeight = false
			}
			if (this.onlyReachBottom) {
				if (this.deletePage.page * this.deletePage.pageSize < this.deletePage.total) {
					this.statusLoading = 'loading'
					this.deletePage.page++
					this.getDeletionData()
					console.log("onReachBottom");
				} else {
					this.statusLoading = 'nomore'
				}
			} else {
				console.log("什么也不做");
			}
		},
		computed: {
			containHeight() {
				return this.fullHeight ? {
					height: 'calc(100vh - 44px)'
				} : {
					height: '100%'
				}
			},
		},
		methods: {
			getDeletionData() {
				viewDel({
					pageSize: this.deletePage.pageSize,
					page: this.deletePage.page,
				}).then(s => {
					if (s.code === 20000) {
						this.deletePage.total = s.data.total;
						let data = s.data.data;
						data.forEach((item) => {
							item.checked = []
						})
						this.deletionData = this.deletionData.concat(data)
						if (this.deletePage.total < this.deletePage.pageSize) {
							this.statusLoading = 'nomore'
						}
					} else {
						uni.showToast({
							title: s.message,
							icon: 'none'
						})
					}
				});
			},
			checkboxChange(detail) {
				// console.log(detail);
			},
			// 全选
			checkAllChange(detail) {
				// console.log(detail);
				if (detail.length > 0) {
					this.deletionData.map((e) => e.checked = ["yes"])
				} else {
					this.deletionData.map((e) => e.checked = [])
				}
			},
			onUndeletion() {
				const mulSelection = this.deletionData.filter((val) => val.checked.length > 0)
				const ids = mulSelection.map((e) => e.id);
				// console.log(ids);
				let formData = new FormData();
				if (ids.length > 0) {
					formData.append("ids", ids.toString());
				}
				// 将FormData转换为字符串
				const formDataStr = new URLSearchParams(formData).toString();
				// console.log(formDataStr);
				// console.log(formData.get("ids"));
				let that = this
				const getBaseUrl = uni.getStorageSync('netVal');
				uni.request({
					url: getBaseUrl+'/jqmk/baseBank/restore',
					method: 'POST',
					data: formDataStr,
					header: {
						'Content-Type': 'application/x-www-form-urlencoded' //multipart/form-data
					},
					success: function(response) {
						// 请求成功的回调
						if (response.data.code === 20000) {
							// that.riskList = response.data.data
							// console.log("that.riskList", that.riskList);
							uni.showToast({
								title: "恢复成功",
								icon: 'none'
							})
							that.deletePage.page = 1
							that.deletionData = []
							that.getDeletionData();
						} else {
							uni.showToast({
								title: response.data.message,
								icon: "none"
							})
						}
					},
					fail: function(error) {
						// 请求失败的回调
						console.error(error);
					}
				});
			}
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		// background: url("../../static/bg.png");
		// background-size: cover;	
		background: linear-gradient(#5191FF 5%, #6AA2FF 8%, #BDD7FE 15%, #F6FAFF 100%);
		padding: 30rpx 30rpx;
		width: 100%;
		position: relative;
		box-sizing: border-box;
		// height: calc(100vh - 44px - 50px);

		.content {
			background: #ffffff;
			// margin-top: 30rpx;
			padding: 30rpx 32rpx 2rpx;
			box-sizing: border-box;
			border-radius: 15rpx;
			opacity: 0.9;
			width: 100%;
			position: relative;

			.top-btn {

				display: flex;
				align-items: center;
				justify-content: space-between;
				padding: 0 30rpx;

				.u-checkbox-group {
					width: 70%;
				}

				.u-button {
					width: 30%;
					height: 35px;
				}

			}

			.deletion-item {
				.historicalAchievements_item {
					width: 100%;
					background: #ffffff;
					box-sizing: border-box;
					padding: 30rpx;
					display: flex;

					.item-left {
						width: 8%;

						.u-checkbox-group {
							margin-top: 8rpx;
						}
					}

					.item-right {
						width: 92%;
					}

					// margin: 40rpx 0rpx;
					// border-radius: 20rpx;
					// box-shadow: 4px 4px 10px #888888;
					.bold {
						font-weight: 700;
						white-space: nowrap;
						line-height: 1.6;
					}

					.testPaperTitle {
						font-size: 28rpx;
						color: #000000;
						font-weight: bold;
					}

					.testTime {
						font-size: 28rpx;
						color: #737375;
						margin-top: 10rpx;
					}

					.line {
						height: 1rpx;
						background: #737375;
						width: 100%;
						margin: 30rpx 0rpx;
					}

					.historical_content {
						.historical_item {
							width: 100%;
							display: flex;
							justify-content: space-between;

							.historical_title {
								font-size: 30rpx;
								color: #737375;
							}

							.historical_txt {
								margin-top: 10rpx;
								font-size: 30rpx;
								color: #0B0B0B;
							}

							.bule {
								color: #3888FF;
								font-size: 32rpx;
							}
						}
					}
				}

			}
		}
	}
</style>